<template>
  <div>
  
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>

		<div class="container">
			<div class="padding_tb40 text_center">
				<img class="border_radius100" src="../static/images/logo.jpg" alt="logo" />
			</div>
			<div class="pad_lr20_tb10 f_size26">
				<input v-model="referPhone" class="recommend_input" type="" name="" id="" placeholder="请输入推荐人手机号"/>
			</div>
			<div class="pad_lr20_tb10 f_size26">
				<input v-model="phone" class="account_input" type="" name="" id="" placeholder="注册人手机号"/>
			</div>
			<div class="pad_lr20_tb10 f_size26">
				<input v-model="password" class="password_input" type="" name="" id="" placeholder="登陆密码:英文字符加数字组合"/>
			</div>
			<div class="pad_lr20_tb10 f_size26 verification_code_wrap">
				<input v-model="code" class="verification_code_input" type="" name="" id="" placeholder="验证码"/>
				<input type="button" id="btn" @click="getCode" value="获取验证码" class="f_size22 f_color_white bgd_color_main pad20">
			</div>
			<div class="pad_lr20_tb10 pad_t110">
				<button v-bind:disabled="isDisabled" @click="registerClick" class="login_btn bgd_color_main f_color_white f_size26">注册</button>
			</div>
			<div class="overflow_hide pad_lr40_tb10 f_size22">
				<div class="left">
					<input v-model="isChecked" class="width_height32 margin_lf10 border1" type="checkbox" name="" id="" value=""/>
					<label for="">同意<span class="f_color_main">【用户协议】</span></label>
				</div>
        <router-link to="/login">
  				<div class="right">
  					返回登录
  				</div>
        </router-link>
			</div>
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    	leftText: '',
				headerText: '注册',
      referPhone: '',
      phone: '',
      code: '',
      password: '',
      isDisabled: true,
      isChecked: false
    }
  },
  methods: {
    getCode: function () {
      this.$api.get('/front/base/smscode', {
        phone: this.phone,
      }, r => {
        var countdown = 60;
        function sendemail() {
          var obj = $("#btn");
          settime(obj);
        }
        function settime(obj) { //发送验证码倒计时
          if(countdown == 0) {
            obj.attr('disabled', false);
            //obj.removeattr("disabled");
            obj.val("免费获取验证码");
            countdown = 60;
            return;
          } else {
            obj.attr('disabled', true);
            obj.val("重新发送(" + countdown + ")");
            countdown--;
          }
          setTimeout(function() {
            settime(obj)
          }, 1000)
        }
        sendemail()
      })
    },
    registerClick: function () {
      console.log('aa', typeof(this.phone))
      this.$api.post('/front/base/signUp', {
        referPhone: this.referPhone,
        phone: this.phone,
        code: this.code,
        password: this.password
      }, r => {
        console.log('r2', r)
        if(r=="注册成功"){
          location.href = '/login'
        }
      })
    }

  },
  watch: {
    isChecked: function () {
      console.log('a', this.isChecked)
      if(this.isChecked === true) {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#btn{
  position: absolute;
  top: 14px;
  right: 24px;
  border-radius: 20px;
}
</style>
